বর্ডারের ভিতরে এবং কন্টেন্টের(content) চারপাশে ফাঁকা স্থান তৈরি করার জন্য সিএসএস Padding
প্রোপার্টিটি ব্যবহার করা হয়।
Padding
প্রোপার্টিটি একটি এলিমেন্টের মধ্যে কন্টেন্টের চারপাশে(বর্ডার এর মধ্যে) ফাঁকা জায়গা তৈরি করে।
সিএসএসের মাধ্যমে আপনি প্যাডিংকে সম্পূর্ণভাবে নিয়ন্ত্রন করতে পারেন। সিএসএস Padding
প্রোপার্টি দ্বারা আপনি একটি এলিমেন্টের প্রত্যেক পাশে যেমন- top
, right
, bottom
এবং left
এ পৃথকভাবে প্যাডিং সেট করতে পারেন।
এই এলিমেন্টেটির চারপাশে 50px প্যাডিং ব্যবহার করা হয়েছে।
|
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো প্যাডিং প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।
এলিমেন্টের উপরের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের ডানের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের নিচের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের বামের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।
একটি এলিমেন্টের কন্টেন্টের চারপাশে প্যাডিং সেট করার জন্য সিএসএসে ভিন্ন ভিন্ন প্যাডিং প্রোপার্টি রয়েছে। এগুলো হলোঃ
padding-top
padding-right
padding-bottom
padding-left
সবগুলো মার্জিন প্রোপার্টি নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ
auto
- ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।inherit
- প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।
নিচের উদাহরণে <xmp><p>
</xmp> এলিমেন্টের প্রত্যেক পাশে বিভিন্ন প্রকার প্যাডিং এর ব্যবহার দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<p>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।
বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ।পার্শ্ববর্তী দেশের রাজ্য পশ্চিমবঙ্গ
ও ত্রিপুরা-সহ বাংলাদেশ একটি ভৌগোলিকভাবে জাতিগত ও ভাষাগত "বঙ্গ" অঞ্চলটির মানে পূর্ণ করে।
"বঙ্গ" ভূখণ্ডের পূর্বাংশ পূর্ব বাংলা নামে পরিচিত ছিল, যা বর্তমানে বাংলাদেশ নামের দেশ।
পৃথিবীতে যে ক'টি রাষ্ট্র জাতিরাষ্ট্র হিসেবে মর্যাদা পায় তার মধ্যে বাংলাদেশ অন্যতম।</p>
</body>
</html>
কোড সংক্ষিপ্ত করার জন্য সকল প্যাডিং প্রোপার্টিকে একটি শর্টহ্যান্ডশর্টহ্যান্ড প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।
নিচের পৃথক পৃথক প্যাডিং প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো padding
প্রোপার্টিঃ
padding-top
padding-right
padding-bottom
padding-left
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h1 {
color: green
}
p {
border: 2px solid black;
background-color: lightseagreen;
padding: 40px 25px 50px 60px;
color: white;
}
</style>
</head>
<body>
<h1>প্যাডিং শর্টহ্যান্ড প্রোপার্টির ব্যবহারঃ</h1>
<p>এই প্যারাগ্রাফটির উপরে 40px, ডানে 25px, নিচে 50px এবং বামে 60px প্যাডিং সেট করা হয়েছে।</p>
</body>
</html>
উপরের উদাহরণটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ
যদি padding
প্রোপার্টিতে চারটি ভ্যালু থাকেঃ
যদি padding
প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ
যদি padding
প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ
যদি padding
প্রোপার্টিতে একটি ভ্যালু থাকেঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div.example1 {
border: 2px solid red;
background-color:lightpink;
color: white;
padding: 60px 55px 75px 50px;
}
div.example2 {
border: 2px solid red;
background-color:lightseagreen;
color: white;
padding: 55px 50px 75px;
}
div.example3 {
border: 2px solid red;
background-color:lightsalmon;
color: white;
padding: 40px 50px;
}
div.example4 {
border: 2px solid red;
background-color:lightgrey;
color: black;
padding: 40px;
}
</style>
</head>
<body>
<div class="example1">বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।</div><br>
<div class="example2">বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।</div><br>
<div class="example3">বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।</div><br>
<div class="example4">বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।</div>
</body>
</html>
Read more